<template>
  <div class="index">
    <el-container>
      <el-main>
        <el-input
            class="search-bar"
            placeholder="搜索餐厅..."
            suffix-icon="el-icon-search"
        ></el-input>
        <el-button type="primary" class="search-button" >搜索</el-button>
        <el-card class="welcome-card">
          <h2>今天的你想吃些什么呢？</h2>
          <p>我们为你推荐一些高评分的餐厅，快来看看吧！</p>
        </el-card>
        <el-row :gutter="20" class="restaurant-list">
          <el-col v-for="restaurant in recommendedRestaurants" :key="restaurant.id" :span="8">
            <el-card class="restaurant-card">
              <img :src="restaurant.image" class="restaurant-image" />
              <div class="restaurant-info">
                <h3 class="restaurant-name">{{ restaurant.name }}</h3>
                <p class="restaurant-mask">评分: {{ restaurant.rating }}</p>
                <p class="restaurant-discrible">{{ restaurant.description }}</p>
                <el-button type="primary" @click="viewDetails(restaurant.id)">查看详情</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <p>© 2024 惊喜一餐. 保留所有权利.</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendedRestaurants: [
        {
          id: 1,
          name: '小野日禾·料理小屋',
          rating: 4.8,
          description: '镜湖区镜湖路1号',
          image: 'src/static/小野日禾.jpg',
        },
        {
          id: 2,
          name: '许府牛火锅（苏宁广场店）',
          rating: 4.7,
          description: '镜湖区中山路11号苏宁广场8楼',
          image: 'src/static/许府牛.jpg',
        },
        {
          id: 3,
          name: '半天妖烤鱼（苏宁广场店）',
          rating: 4.9,
          description: '镜湖区中山路11号苏宁广场5楼',
          image: 'src/static/半天妖.jpg',
        },
        // 可以添加更多餐厅
      ],
    };
  },
  methods: {
    viewDetails(id) {
      // 跳转到餐厅详情页面
      this.$router.push({ name: 'RestaurantDetails', params: { id } });
    },
  },
};
</script>

<style scoped>
.welcome-card {
  text-align: center;
  background-color: #f0faff;
}

.restaurant-list {
  margin-top: 10px;
}

.restaurant-card {
  text-align: center;
}

.restaurant-image {
  width: 100%;
  height: auto;
}

.restaurant-name {
  font-size: 15px;
}

.restaurant-mask {
  font-size: 13px;
  background: -webkit-linear-gradient(#FFD700, #FFC300);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.restaurant-discrible {
  font-size: 12px;
}

.restaurant-info {
  padding: 10px;
}

.search-bar {
  width: 50%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.search-button {
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
</style>